<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

<div th:insert="publicHeader.html"></div>
<script th:src="@{/publicHeader.js}"></script>


<div class="container-fluid" id="app" style="margin-top: 180px;margin-bottom: 100px">

    <div class="container col-md-12" v-if="cartList.length < 1">
        <h3 style="text-align: center">还没有任何加购,快去购买吧~</h3>
    </div>

    <div class="container" v-if="cartList.length > 0">
        <div class="row">
            <div class="col-md-12">
                <table class="table">
                    <tr>
                        <th>选择</th>
                        <th>武器名称</th>
                        <th>武器图片</th>
                        <th>武器单价(元)</th>
                        <th>购买数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="cart in cartList">
                        <td>
                            <input type="checkbox" class="cartCheck" :value="cart.productId" @click="totalPriceInfo"/>
                        </td>
                        <td style="height:60px;line-height: 60px" v-text="cart.productName">武器名称</td>
                        <td>
                            <img :src="cart.productImgsrc" alt="..."
                                 style="width: 60px;height: 60px; border-radius: 50%"/>
                        </td>
                        <td style="height:60px;line-height: 60px" v-text="cart.productPrice">武器单价</td>
                        <td style="height:60px;line-height: 60px">
                            <a @click.prevent="changeBuyCount(cart.productId,-1)" class="btn btn-default btn-sm">一</a>
                            &nbsp;<span :id="[cart.productId+'BuyCountSpan']" v-text="cart.buyCount">5</span>&nbsp;
                            <a @click.prevent="changeBuyCount(cart.productId,1)" class="btn btn-default btn-sm">十</a>
                        </td>
                        <td :id="[cart.productId+'SumPriceTd']" style="height:60px;line-height: 60px"
                            v-text="cart.sumPrice">武器小计
                        </td>
                        <td style="height:60px;line-height: 60px">
                            <a @click.prevent="changeBuyCount(cart.productId,0)" class="btn btn-danger">删除</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <b> 总价(元): {{totalPrice}} </b>
            </div>

            <div class="col-md-6">
                <button class="btn btn-success" @click="toOrderPreview">结算</button>
            </div>
        </div>

    </div>


</div>


<script>

    console.log("===购物车===")

    let app = new Vue({
        el: "#app",
        data: {
            cartList: [],
            totalPrice: 0.00
        },
        methods: {
            cartListInfo() {
                let vueObj = this;
                $.post("/cart/getCart", function (data) {
                    console.log(data);

                    /* 看自己项目需求,需要的话就调用此方法进行对应的拦截 */
                    checkLogin(data,function (data) {
                        vueObj.cartList = data;
                    })
                })
            },
            changeBuyCount(weaponId, count) {
                let params = {
                    weaponId: weaponId,
                    count: count
                }
                let vueObj = this;
                $.post("/cart/updateBuyCount", params, function (data) {
                    console.log(data);
                    if (data.buyCount == 0) {
                        location.href = "/myCart.html"
                        return
                    }

                    let spanId = data.productId + "BuyCountSpan";
                    let tdId = data.productId + "SumPriceTd";
                    $("#" + spanId).text(data.buyCount);
                    $("#" + tdId).text(data.sumPrice)
                    vueObj.totalPriceInfo();
                })
            },
            totalPriceInfo() {
                let weaponIds = [];
                // $("input[name='cartCheck']").each(function (){
                //     if($(this).prop("checked")){
                //         console.log($(this).val())
                //         bookIds.push($(this).val())
                //     }
                // })
                let checkBoxes = $(".cartCheck");
                for (let checkBox of checkBoxes) {
                    if ($(checkBox).prop("checked")) {
                        console.log($(checkBox).val())
                        weaponIds.push($(checkBox).val())
                    }
                }
                console.log("id数组:  " + weaponIds)
                if (weaponIds.length < 1) {
                    this.totalPrice = 0.00
                    return;
                }
                let vueObj = this;
                $.post("/cart/totalPrice", {weaponIds: weaponIds}, function (data) {
                    console.log(data)
                    vueObj.totalPrice = data;
                })
            },
            toOrderPreview(){
                let weaponIds = [];

                let checkBoxes = $(".cartCheck");
                for (let checkBox of checkBoxes) {
                    if ($(checkBox).prop("checked")) {
                        console.log($(checkBox).val())
                        weaponIds.push($(checkBox).val())
                    }
                }
                console.log(weaponIds)
                if(weaponIds.length<1){
                    alert("至少选中一项去结算")
                    return;
                }

                //携带weaponIds到订单预览页
                sessionStorage.setItem("weaponIds",JSON.stringify(weaponIds))
                location.href = "/orderPreview.html"
            }
        },
        created() {
            this.cartListInfo();
        }
    })

</script>


<div th:insert="publicFooter.html"></div>


</body>
</html>